<template>
  <div class='container'>
    <el-card>
      <!-- 头部模块 -->
      <el-row type="flex">
        <el-col :span="5">
          <span>标签名称</span>
          <el-input
            style="width:200px;height:32px;"
            v-model="pages.tagName"
          ></el-input>
        </el-col>
        <el-col :span="10">
          <span>状态</span>
          <el-select
            placeholder="请选择"
            v-model="pages.state"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-button
            class="Cancel"
            @click="Cancel"
          >清除</el-button>
          <el-button
            type="primary"
            @click="Search"
          >搜索</el-button>
        </el-col>
        <el-col
          :span="9"
          class="three"
        >
          <el-link
            v-if="name"
            class="back"
            type="primary"
            @click="back"
          ><i class="el-icon-back el-icon--left"></i>返回学科
          </el-link>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addTag"
          >新增标签</el-button>
        </el-col>
      </el-row>

      <!-- 警告信息模块 -->
      <el-row class="warn">
        <el-alert
          type="info"
          show-icon
        >
          <span slot="title">
            共有{{pages.total}}条数据
          </span>
        </el-alert>
      </el-row>

      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="tagName"
          label="标签名称"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="username"
          label="创建者"
          align="center"
          header-align="center"
        />
        <el-table-column
          prop="addDate"
          label="创建日期"
          align="center"
          header-align="center"
          :formatter="filterDate"
        />
        <el-table-column
          prop="state"
          label="状态"
          :formatter="filterState"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          header-align="center"
        >
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="OnChange(row)"
            >{{row.state==1?'禁用':'启用'}}</el-button>
            <el-button
              type="text"
              :disabled="row.state===1"
              @click="btnDel(row.id)"
            >删除</el-button>
            <el-button
              type="text"
              :disabled="row.state===1"
              @click="update(row.id)"
            >修改</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="end"
        align="middle"
        class="last"
      >
        <el-col :span="7">
          <!-- @size-change="handleSizeChange"
            @current-change="handleCurrentChange" -->
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pages.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            :current-page="pages.page"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <Tagadd
      :isShow.sync="IsShowDialog"
      ref="DialogTag"
    ></Tagadd>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags'
import { status } from '@/api/hmmm/constants'
import { formatDate } from '@/filters'
export default {
  data () {
    return {
      tableData: [],
      pages: {
        page: 1,
        pagesize: 10,
        total: 0,
        tagName: '',
        state: null,
        subjectID: this.$route.query.id || null,
      },
      status: null,
      IsShowDialog: false,
      ObjectState: {
        id: null,
        state: null
      },

      name: this.$route.query.name || ''
      // Isshow: this.$route.params.isOk
    }
  },

  created () {
    this.loadTagsList()
    // 获取标签的列表
    this.status = status
  },

  methods: {
    // 获取标签的列表
    async loadTagsList () {
      console.log(this.pages);
      const { data: { items, counts } } = await list(this.pages)
      this.tableData = items
      this.pages.total = counts
    },

    // 过滤标签的状态
    filterState (row, column, cellValue, index) {
      const state = status.find(item => item.value == row.state)
      return state ? '已' + state.label : '未知'
    },
    filterDate (row, column, cellValue, index) {
      return formatDate(cellValue)
    },

    // 点击分页页码触发的事件
    handleCurrentChange (page) {
      // 将点击的页码数赋值给this.pages.page 即改变当前的页码 然后再重新获取标签列表数据
      this.pages.page = page
      // 然后再重新获取标签列表数据
      this.loadTagsList()
    },

    async Search () {
      // 调用获取列表函数
      this.loadTagsList()
    },

    Cancel () {
      this.pages.tagName = ''
      this.pages.state = null
      // 调用获取列表函数
      this.loadTagsList()
    },

    // 添加标签
    addTag () {
      // 弹窗开启
      this.IsShowDialog = true
    },

    //  修改状态
    async OnChange (data) {
      // data为点击的表格中那一行的数据
      // 使用三元表达式 修改 state 状态属性
      this.ObjectState.state = data.state == 1 ? 0 : 1
      this.ObjectState.id = data.id
      // 提交修改后的状态属性
      await changeState(this.ObjectState)
      // 重新获取列表数据
      await this.loadTagsList()
    },

    async btnDel (id) {
      await remove(id)
      // 调用获取列表函数
      this.loadTagsList()
    },

    async update (id) {

      // 调用子组件中的方法来获取标签的信息
      await this.$refs.DialogTag.loadDetail(id)
      // 打开弹窗
      this.IsShowDialog = true
    },

    handleSizeChange (value) {
      this.pages.pagesize = value
      this.loadTagsList()
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px 5px;
  span {
    font-weight: 700;
    margin-right: 10px;
  }
  .Cancel {
    margin-left: 10px;
  }
  .three {
    text-align: right;
  }
  .warn {
    margin: 20px 0;
  }
  .last {
    height: 60px;
  }
  .back {
    margin-right: 8px;
  }
}
</style>
